<template>
  <div class="cartItemList">
    <div class="listHeader clearFix">
      <h1>购物车</h1>
      <a @click="clearCart">清除</a>
    </div>
    <div class="listContent">
      <ul>
        <li v-for="item in items" class="item clearFix">
          <div class="food">{{item.food}}</div>
          <cart-control class="control" :quantity="item.quantity" @increase="addToCart( item.food )" @decrease="removeFromCart(item.food)"></cart-control>
          <div class="price">{{formatCurrency(item.price)}}</div>
        </li>
      </ul>
    </div>
    <div class="listFooter">

    </div>
  </div>
</template>

<script>
    import {mapState, mapGetters,mapMutations, mapActions} from 'vuex'
    import cartControl from '../cartControl'
    export default {
      components:{
        'cart-control': cartControl
      },
      props:{
        items: {
          type: Array,
          required: true
        }
      },

      data:function () {
          return {
          }
      },
      computed: {
      },

      methods: {
        ...mapActions(['addToCart','removeFromCart', 'clearCart'])
      }
    }
</script>

<style lang="scss" scoped>
  .cartItemList{
    .listHeader{
      background: #f3f5f7;
      border-bottom: 1px solid rgba(7,17,27,0.1);

      padding: 0 18px;
      line-height: 40px;

      h1{
        float: left;
        font-size: 14px;
      }
      a{
        float: right;
        font-size: 12px;
        color: #00a0dc;
      }
    }
    .listContent{
      background: #fff;
      padding: 0 18px;

      .item {
        padding: 12px 0;
        border-top: 1px solid rgba(7,17,27,0.1);

        .food {
          float: left;
          line-height: 24px;

          font-size: 14px;
        }
        .price {
          float: right;
          line-height: 24px;
          font-size: 14px;
          font-weight: 700;
          color: #f01414;

          margin-right: 6px;
        }
        .control {
          float: right;
        }
      }
    }
    .listFooter{
      background: #f3f5f7;
      border-top: 1px solid rgba(7,17,27,0.1);

      height: 20px;
    }
  }
</style>
